<!-- @format -->

<script setup lang="ts">
import TheIcon from '@/components/TheIcon.vue'
import theColors from './theColors.vue'
import { min } from '@/utils/commonUtils'
import { DEF_FONT_SIZE } from './conf'
const props = defineProps({
  conf: {
    type: Object,
  },
})

const emit = defineEmits(['change'])
const colors = [
  '#000',
  '#fff',
  'red',
  'blue',
  'green',
  'yellow',
  'orange',
  'purple',
]
const bgColors = ['transparent', ...colors]

const changeConf = (value) => {
  emit('change', {
    ...props.conf,
    ...value,
  })
}
const inputChange = (e) => {
  const { value } = e
  changeConf({
    content: value,
  })
}

const changeFontSize = (num) => {
  const { fontSize = DEF_FONT_SIZE } = props.conf
  let newSize = min(fontSize + num * 2, 24)

  changeConf({
    fontSize: newSize,
  })
}
</script>

<template>
  <div class="conf-text-x">
    <div class="tip">请输入文本内容4:</div>
    <div class="input-x">
      <wd-input
        type="text"
        no-border
        custom-input-class="my-input"
        :model-value="conf.content"
        :placeholder="conf.title"
        @input="inputChange"
      />
    </div>
    <div class="opes-x">
      <!-- 颜色  -->
      <div class="colors-x">
        <div class="tip">颜色:</div>
        <the-colors
          :colors="colors"
          :current="conf.color || colors[0]"
          @change="changeConf({ color: $event })"
        ></the-colors>
      </div>

      <!-- 字号大小 -->
      <div class="colors-x">
        <div class="tip">字号:</div>
        <the-icon
          class="btn-add"
          icon="add"
          @click="changeFontSize(1)"
        ></the-icon>
        <the-icon icon="decrease" @click="changeFontSize(-1)"></the-icon>
      </div>
    </div>
    <div class="opes-x">
      <!-- 颜色  -->
      <div class="colors-x">
        <div class="tip">背景:</div>
        <the-colors
          :colors="bgColors"
          :current="conf.bgColor || bgColors[0]"
          @change="changeConf({ bgColor: $event })"
        ></the-colors>
      </div>
      <!-- 加粗 -->
      <wd-checkbox
        size="small"
        :model-value="conf.bold"
        @change="changeConf({ bold: $event.value })"
        >加粗</wd-checkbox
      >
    </div>
  </div>
</template>
<style>
.my-input {
  font-size: 100rpx;
}
</style>
<style lang="scss" scoped>
.input-x {
  margin: 20rpx 0;
  border-bottom: 4px solid #ddd;
  ::v-deep {
    .wd-input__value {
      font-size: 200px;
    }
    .my-input {
      font-size: 100rpx;
    }
  }
}
.opes-x {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
}
.title-tip {
  padding: 10px 0;
  font-size: 14px;
  color: #999;
}
.colors-x {
  display: flex;
  align-items: center;
}
.font-size-x {
  display: flex;
  align-items: center;
}
.btn-add {
  margin-right: 8rpx;
}
.tip {
  font-size: 14px;
  color: #999;
  padding-right: 8rpx;
}
</style>
